<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        user-select: none;
        box-sizing: border-box;
      }
      img {
        display: block;
      }
      #wrap {
        width: 960px;
        height: 630px;
        padding: 40px 30px;
        border: 1px solid #aaa;
        margin: 50px auto;
      }
      #wrap .goods {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
      }
      #wrap .goods li {
        position: relative;
        width: 25%;
        height: 240px;
        padding: 10px 6px;
      }

      #wrap .goods li p.price {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 50px;
        height: 50px;
        background-image: url("https://s3.ax1x.com/2020/11/19/DuOd0S.png");
        color: #fff;
        line-height: 50px;
        text-align: center;
        font-style: italic;
        font-size: 14px;
      }

      #wrap .goods li p.title {
        font-size: 12px;
        line-height: 30px;
      }

      #wrap .btn {
        display: flex;
        justify-content: flex-end;
      }

      #wrap .btn li {
        width: 90px;
        height: 40px;
        margin-top: 20px;
        margin-right: 10px;
        background-color: #f60;
        line-height: 40px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <ul class="goods">
        <!--<li>
		  <img width="190" height="190" src="./img/xh_img1.jpg" alt="">
		  <p class="price">￥<b>100</b></p>
		  <p class="title">深红色经典玫瑰</p>
		</li>
		<li>
		  <img width="190" height="190" src="./img/xh_img2.jpg" alt="">
		  <p class="price">￥<b>97</b></p>
		  <p class="title">甜美七分袖荷叶边条纹设</p>
		</li>
		<li>
		  <img width="190" height="190" src="./img/xh_img3.jpg" alt="">
		  <p class="price">￥<b>99.5</b></p>
		  <p class="title">甜美七分袖荷叶边条纹设</p>
		</li>
		<li>
		  <img width="190" height="190" src="./img/xh_img4.jpg" alt="">
		  <p class="price">￥<b>215</b></p>
		  <p class="title">甜美七分袖荷叶边条纹设</p>
		</li>
		<li>
		  <img width="190" height="190" src="./img/xh_img5.jpg" alt="">
		  <p class="price">￥<b>130</b></p>
		  <p class="title">经典红色我的最爱</p>
		</li>
		<li>
		  <img width="190" height="190" src="./img/xh_img6.jpg" alt="">
		  <p class="price">￥<b>300</b></p>
		  <p class="title">清淡优雅百年百合</p>
		</li>
		<li>
		  <img width="190" height="190" src="./img/xh_img7.jpg" alt="">
		  <p class="price">￥<b>700</b></p>
		  <p class="title">紫色冷艳系列</p>
		</li>
		<li>
		  <img width="190" height="190" src="./img/xh_img8.jpg" alt="">
		  <p class="price">￥<b>500</b></p>
		  <p class="title">粉色浪漫系列玫瑰</p>
		</li>-->
      </ul>
      <ul class="btn">
        <li>随机排序</li>
        <li>从低到高</li>
        <li>从高到低</li>
      </ul>
    </div>

    <script>
      (function () {
        //我们假装请求到了后台数据

        let oUl = document.querySelector(".goods"); //获取整个ul
        let aBtn = document.querySelectorAll(".btn li"); //获取所有按钮

        let data = [
          {
            src: "./img/xh_img1.jpg",
            price: 100,
            title: "深红色经典玫瑰",
          },
          {
            src: "./img/xh_img2.jpg",
            price: 97,
            title: "甜美七分袖荷叶边条纹设",
          },
          {
            src: "./img/xh_img3.jpg",
            price: 99.5,
            title: "甜美七分袖荷叶边条纹设",
          },
          {
            src: "./img/xh_img4.jpg",
            price: 215,
            title: "甜美七分袖荷叶边条纹设",
          },
          {
            src: "./img/xh_img5.jpg",
            price: 130,
            title: "经典红色我的最爱",
          },
          {
            src: "./img/xh_img6.jpg",
            price: 300,
            title: "清淡优雅百年百合",
          },
          {
            src: "./img/xh_img7.jpg",
            price: 700,
            title: "紫色冷艳系列",
          },
          {
            src: "./img/xh_img8.jpg",
            price: 500,
            title: "粉色浪漫系列玫瑰",
          },
        ];

        function init() {
          let html = "";

          data.forEach((item, index) => { //item是数组中每个{}对象，所以下面要打点访问对象属性
            console.log(item);
            console.log(index);

            html += `<li>
  <img width="190" height="190" src="${item.src}" alt="">
  <p class="price">￥<b>${item.price}</b></p>
  <p class="title">${item.title}</p>
	</li>`;
          });

          oUl.innerHTML = html;
        }

        init();

        let fnArr = [
          (a, b) => Math.random() - 0.5,
          (a, b) => a.price - b.price,
          (a, b) => b.price - a.price,
        ];

        aBtn.forEach((item, index) => {
          console.log(item, index);

          item.onclick = function () {
            //对data进行排序 --- 根据index来决定我们用什么函数排序
            data.sort(fnArr[index]);

            //重新渲染新的页面结构
            init();
          };
        });

        //btn的点击按钮
        //(function () {
        //  //随机排序
        //  aBtn[0].onclick = function () {
        //    let fn = (a, b) => Math.random() - 0.5;

        //对data进行排序
        //    data.sort(fn); // -0.5 - 0.5

        //    //重新渲染新的页面结构
        //    init();
        //  };

        //  //   从低到高
        //  aBtn[1].onclick = function () {
        //    let fn = (a, b) => a.price - b.price;
        //对data进行排序
        //    data.sort(fn);

        //    //重新渲染新的页面结构
        //    init();
        //  };

        //  //   从高到低
        //  aBtn[2].onclick = function () {
        //    let fn = (a, b) => b.price - a.price;

        //对data进行排序
        //    data.sort(fn);

        //    //重新渲染新的页面结构
        //    init();
        //  };
        //})();

        ////btn的点击按钮
        //(function () {
        //  //随机排序
        //  aBtn[0].onclick = function () {
        //对data进行排序
        //    data.sort((a, b) =>  Math.random() - 0.5); // -0.5 - 0.5

        //    //重新渲染新的页面结构
        //	init();
        //  };

        ////   从低到高
        //  aBtn[1].onclick = function () {
        //对data进行排序
        //    data.sort((a, b) =>   a.price - b.price );

        //    //重新渲染新的页面结构
        //	init();
        //  };

        ////   从高到低
        //  aBtn[2].onclick = function () {
        //对data进行排序
        //    data.sort((a, b) =>   b.price - a.price );

        //    //重新渲染新的页面结构
        //	init();
        //  };
        //})();
      })();
    </script>
  </body>
</html>
